<template>
  <div class="record">
    <!-- <div
      :fullscreen="true"
      v-loading.lock="loading"
      class="loading-content"
      v-if="loading"
    ></div> -->
    <div>
      <el-form v-model="searchForm">
        <el-row :gutter="20">
          <el-col :span="24"
            ><el-form-item>
              <el-input
                v-model="searchForm.bill_no"
                :placeholder="$t('orderNoSearch')"
                class="search"
                @change="filterForm"
                clearable
              ></el-input> </el-form-item
          ></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item>
              <el-date-picker
                v-model="searchForm.date"
                type="datetimerange"
                range-separator="-"
                :start-placeholder="$t('startTime')"
                :end-placeholder="$t('endTime')"
                style="width: 100%"
                @change="filterForm"
                clearable
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="5">
            <el-form-item>
              <el-select
                v-model="searchForm.coin_name"
                :placeholder="$t('currency')"
                @change="filterForm"
                clearable
              >
                <el-option
                  v-for="item in currencyList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
          <el-col :span="5">
            <el-form-item>
              <el-select
                v-model="searchForm.status"
                :placeholder="$t('status')"
                @change="filterForm"
                clearable
              >
                <el-option
                  v-for="item in statusList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="5">
            <el-form-item>
              <el-select
                v-model="searchForm.trade_type"
                :placeholder="$t('tradeType')"
                @change="filterForm"
                clearable
              >
                <el-option
                  v-for="item in tradeTypeList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
        </el-row>
      </el-form>
      <el-table
        :data="list"
        style="width: 100%"
        :empty-text="$t('noData')"
        v-loading="loading"
      >
        <el-table-column prop="bill_no" :label="$t('orderNo')" align="center">
        </el-table-column>
        <el-table-column
          prop="status"
          :label="$t('status')"
          align="center"
          width="100"
        >
          <template slot-scope="scope">
            <span class="text-success" v-if="scope.row.status == 1">
              {{ $t("success") }}</span
            >
            <span class="text-info" v-if="scope.row.status == 0">
              {{ $t("pending") }}</span
            >
            <span class="text-danger" v-if="scope.row.status == 2">
              {{ $t("error") }}</span
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="trade_type"
          :label="$t('tradeType')"
          align="center"
          width="100"
        >
        </el-table-column>

        <el-table-column prop="create_time" :label="$t('time')" align="center">
          <template slot-scope="scope">
            {{ getTimes(scope.row.create_time) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="coin_name"
          :label="$t('currency')"
          align="center"
          width="100"
        >
        </el-table-column>
        <el-table-column
          prop="amount"
          :label="$t('count')"
          align="center"
          width="100"
        >
          <template slot-scope="scope">
            <span :class="scope.row.sg == '+' ? 'green' : 'red'">
              {{ scope.row.sg }} {{ scope.row.amount }}
            </span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('operate')" align="center">
          <template slot-scope="scope">
            <el-button
              class="tableBtn"
              size="small"
              @click="goDetail(scope.row)"
              >{{ $t("view") }}</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="page.currentPage"
          :page-size="page.pagesize"
          layout="total, prev, pager, next"
          :total="page.total"
        >
        </el-pagination>
      </div>
    </div>
    <walletDetailDrawer
      :isShowOrderDetail="isShowOrderDetail"
      :coinData="coinData"
      from="records"
      :order_no="currentOrderNo"
      @close="clearNo"
    />
  </div>
</template>
<script>
import { httpWalletBills } from "@/http/api";
import {
  formatMoney,
  getTimes,
  timestamp,
  removeEmptyValues,
} from "@/utils/common";
import walletDetailDrawer from "./components/walletDetailDrawer.vue";
export default {
  components: {
    walletDetailDrawer,
  },
  data() {
    return {
      list: [],
      loading: false,
      page: {
        total: 0,
        currentPage: 1,
        pagesize: 10,
      },
      searchForm: {
        bill_no: "",
        trade_type: "",
        status: "",
      },
      currencyList: [],
      currentOrderNo: "",
      coinData: {},
      isShowOrderDetail: false,
      tradeTypeList: [],
      statusList: [
        {
          label: this.$t("pending"),
          value: 0,
        },
        {
          label: this.$t("success"),
          value: 1,
        },
        {
          label: this.$t("error"),
          value: 2,
        },
      ],
    };
  },
  mounted() {
    this.getRecord();
  },
  methods: {
    formatMoney,
    getTimes,
    async getRecord() {
      this.loading = true;
      let params = {
        page: this.page.currentPage,
        pagesize: this.page.pagesize,
        ...this.searchForm,
      };
      if (params.date) {
        params.start = params.date[0]
          ? timestamp(params.date[0].valueOf())
          : "";
        params.end = params.date[1] ? timestamp(params.date[1].valueOf()) : "";
        delete params.date;
      }
      const result = removeEmptyValues(params);
      let res = await httpWalletBills(result);
      this.list = res.data?.list || [];
      this.tradeTypeList = res.data?.extra?.trade_type_map || [];
      this.page.total = res.data?.page?.total_count || 0;
      this.loading = false;
    },
    filterForm() {
      this.getRecord();
    },
    handleSizeChange(val) {
      this.page.pagesize = val;
      this.getRecord();
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.getRecord();
    },
    goDetail(row) {
      this.coinData = row;
      this.currentOrderNo = row.order_no;
      this.isShowOrderDetail = true;
    },
    clearNo() {
      this.currentOrderNo = "";
      this.isShowOrderDetail = false;
    },
  },
};
</script>
<style lang="less" scoped>
.record {
  position: relative;
  width: 100%;
  min-height: 300px;
}
.tableBtn {
  border-radius: 20px;
}
.page {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.el-table {
  max-height: 400px;
  overflow-y: scroll;
}
</style>
